<template>
  <div class="box">
    <h5>Two-第二层组件</h5>
    <br />
    <p>info:{{ info }}</p>
    <input type="button" value="打印$root" @click="printRoot()" />
    <br />
    <input
      type="button"
      value="为$root绑定自定义事件"
      @click="bindRootInfoEvent()"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "",
    };
  },
  // vue 组件的 methods 只有第一层普通函数的this被修改为当前组件的实例对象
  //     方法内部的方法，如果需要保留当前组件的this指向，请务必使用箭头函数
  methods: {
    printRoot() {
      console.log("this.$root", this.$root);
    },
    bindRootInfoEvent() {
      // 接收数据的组件需要，绑定事件，通过形参接收结果
      this.$root.$on("update-info", (arg) => {
        console.log("Two-childCom 为 $root 绑定的自定义事件", arg);
        this.info = arg;
      });
    },
  },
  // created() {
  //   this.bindRootInfoEvent();
  // },
  beforeMount() {
    this.bindRootInfoEvent();
  },
  // mounted() {
  //   this.bindRootInfoEvent();
  // },
};
</script>
